<template>
	<div class="open-map">
		<iframe id="mapPage" width="100%" height="100%" frameborder=0 :src="mapUrl"></iframe>
	</div>
</template>

<script>
import common from '../../utils/common.js';
var app = getApp();
export default {
	name: 'openMap',
	data() {
		return {
			searchTxt: '',
			sugguestedList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
			showCityList: false,
			nowMap: {
				// 地图配置
				center: { lng: 117.21098502609193, lat: 31.83229194441236 }, // 地图中心点位置
				zoom: 14 // 地图缩放级别
			},
			currentPosition: {},
			locationList: [], // 定位地址推荐列表
			searchList: [], // 搜索推荐列表
			searchTimer: '',
			mapUrl: 'https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp'
		};
	},
	onLoad (options) {
		if (options.coord) {
			// 参考文档 https://lbs.qq.com/tool/component-picker.html
			this.mapUrl = this.mapUrl + 'type=1&coord=' + options.coord + '&coordtype=' + options.coordtype
		}
	},
	mounted () {
		window.addEventListener('message', this.getAddress);
	},
	onUnload () {
		window.removeEventListener('message', this.getAddress);
	},
	methods: {
		getAddress (event) {
			// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
			console.log('选中地址', event)
			var loc = event.data;
			if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
			  console.log('location', loc);
			  loc.adress = loc.poiname
			  loc.lng = loc.longitude = loc.latlng.lng
			  loc.lat = loc.latitude = loc.latlng.lat
			  
			  // 缓存到本地 可供其它H5页面使用
			  window.localStorage.setItem('txMapAddress', JSON.stringify(loc))
			  
			  app.globalData.mapAddress = loc;
			  common.navigateBack()
			}
		}
	},
	components: {}
};
</script>

<style lang="stylus">
.open-map
	background #ffffff
	height 100%
	overflow hidden
	.head
		padding 0 10px
		box-shadow 2px 0 5px #999
		border-bottom 1PX solid #ddd
		height 50px
		font-size 14px
		display flex
		align-items center
		.back
			font-size 24px
			padding 10px
			color #999
		.search
			flex-grow 1
			padding 10px 0 10px 10px
		.city
			padding 10px 0
			.icon
				font-size 20px
				vertical-align middle
				color #bbb
		.cancel
			padding 10px
			color #aaa
	.map-box
		position relative
		.bm-view
			height 250px
		.location-icon
			position absolute
			top -webkit-calc(50% - 15px)
			top calc(50% - 15px)
			left -webkit-calc(50% - 15px)
			left calc(50% - 15px)
			width 30px
			height 30px
			background-image url('static/images/location_my.png')
			background-size 100%
			img
				width 30px
	.list
		height -webkit-calc(100% - 300px)
		height calc(100% - 300px)
		background #fff
		overflow-y auto
		.item
			margin-left 10px
			padding 8px 0
			border-bottom 1PX solid #efefef
			line-height 1.8
			display flex
			&:last-child
				border-bottom none
			.icon-box
				width 16px
			.icon, vertical-align top, .color-red
				color #fe2947
			.detail-box
				width -webkit-calc(100% - 46px)
				width calc(100% - 46px)
				padding 0 10px
				.first
					font-size 16px
					display flex
					align-items baseline
					.tip
						margin-right 5px
						white-space nowrap
					.address
						ellipsis(1)
						flex-grow 1
					.distance
						white-space nowrap
						margin-left 5px
						font-size 12px
					.second
						font-size 12px
	.full-list
		height -webkit-calc(100% - 50px)
		height calc(100% - 50px)
	.city-list
		background #f2f2f2
		font-size 14px
	.search-list
		.item
			.detail-box
				width -webkit-calc(100% - 36px)
				width calc(100% - 36px)
				.address-item.active
					color #04b7a5
			&:first-child
				.detail-box
					.address-item.active
						color red
</style>
